@use "../../variables.scss" as *;

.svc-side-bar {
  .svc-search {
    border-bottom: 1px solid var(--ctr-property-grid-search-border-color, var(--sjs-border-10, #dcdcdcff));
    background: var(--ctr-property-grid-search-background-color, var(--sjs-layer-3-background-500, #f4f4f4ff));
    gap: var(--ctr-property-grid-search-gap, var(--sjs-spacing-x1));
  
    padding: var(--ctr-property-grid-search-padding-top, var(--sjs-spacing-x2))
      var(--ctr-property-grid-search-padding-right, var(--sjs-spacing-x2))
      var(--ctr-property-grid-search-padding-bottom, var(--sjs-spacing-x2))
      var(--ctr-property-grid-search-padding-left, var(--sjs-spacing-x2));
  }
  
  .svc-search__input {
    color: var(--ctr-property-grid-search-text-color, var(--sjs-layer-3-foreground-100, #000000e6));
  }
  
  .svc-search__input::placeholder {
    color: var(--ctr-property-grid-search-text-color-placeholder, var(--sjs-layer-3-foreground-50, #00000080));
  }
  
  .svc-search__bar-item:not(.sv-action-bar-item--pressed) {
    &:hover:enabled,
    &:focus:enabled {
      background-color: var(--ctr-property-grid-search-button-background-color-hovered, var(--sjs-layer-3-background-400, #eaeaeaff));
    }
  }
  
  .svc-search__toolbar .sv-action-bar-item__icon use {
    fill: var(--ctr-property-grid-search-button-icon-color, var(--sjs-layer-3-foreground-50, #00000080));
  }
  
  .svc-search__toolbar-counter {
    color: var(--ctr-property-grid-search-count-text-color, var(--sjs-layer-3-foreground-50, #00000080));
  }
  
  .svc-search__search-icon {
    width: var(--ctr-property-grid-search-icon-width, var(--sjs-font-size-x3));
    height: var(--ctr-property-grid-search-icon-height, var(--sjs-font-size-x3));
  
    .sv-svg-icon {
      width: var(--ctr-property-grid-search-icon-width, var(--sjs-font-size-x3));
      height: var(--ctr-property-grid-search-icon-height, var(--sjs-font-size-x3));
  
      use {
        fill: var(--ctr-property-grid-search-icon-color, var(--sjs-layer-3-foreground-50, #00000080));
      }
    }
  }
}